<template>
  <div style="width: 60%; min-height: 15rem; margin: 0 auto">
    <AplidForm v-if="!showResult" ref="formRef" v-bind="rechangeConfig" v-model="formModel" @reset="onReset"
      @submit="onSubmit">
      <template v-slot:contentForm>
        <p class="node-label" v-show="rowColumn.length > 0">
          <span>变更内容</span>
        </p>
        <el-scrollbar max-height="20rem" style="width: 100%">
          <div class="flex align-center" v-show="rowColumn.length > 0">
            <span>您本次将要变更的{{ changeType }}</span>
            <span class="f18 text-black mg-6">{{ name }}</span>
            <p>
              本次变更的数据有<span class="f18 text-black mg-6"> {{ rowColumn.length }} 条 </span>
              请确认内容后提交
            </p>
          </div>

          <div v-for="(item, index) in rowColumn" :key="index">
            <el-descriptions direction="vertical" style="border-bottom: 1px dotted rgb(72, 130, 161)">
              <el-descriptions-item :label="item.label" width="200">
                <content :item="item.before"></content>
              </el-descriptions-item>
              <el-descriptions-item width="60">变更为</el-descriptions-item>
              <el-descriptions-item width="200">
                <content :item="item.after"></content>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-scrollbar>
      </template>
    </AplidForm>
    <template v-else>
      <DataGather v-if="gatherObj.id" :gatherObj="gatherObj" @back="onBackNext"></DataGather>
      <el-result v-else-if="errMessTip" icon="error" title="处理失败" :sub-title="errMessTip">
        <template #extra>
          <el-button type="primary" text @click="onReset">返回修改</el-button>
        </template>
      </el-result>
      <el-result v-else icon="success" title="处理完成">
        <template #extra>
          <el-button type="primary" text @click="onBackNext">返回</el-button>
        </template>
      </el-result>
    </template>
  </div>
</template>

<script setup lang="ts">
import { rechangeConfig } from './config'
import DataGather from './result.vue'
import apiMod from '@/apiMod'
import { useCommonStore } from '@/stores/common'
import content from '../content.vue'

const { tempNowObj } = useCommonStore()
const rowColumn = tempNowObj?.nowChange?.data || []
const noChange = tempNowObj?.noChange || false
type Props = {
  name?: string
  changeType: string
}
withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['back', 'backNext'])
const formModel = ref({})
const showResult = ref(false)
const gatherObj: any = ref({})
const formRef = ref(null)
const errMessTip = ref('')

const onReset = () => {
  emit('back')
}

const onBackNext = () => {
  emit('backNext')
}
const onSubmit = (form, done) => {
  const { dataChangeContentList, code } = tempNowObj.nowChange
  let query = {
    ...form,
    code,
    dataChangeContentList: dataChangeContentList,
  }
  apiMod
    .view_dpDataChange_add(query)
    .then((res) => {
      showResult.value = true
      gatherObj.value = res.data || {}
      done && done()
    })
    .catch((err) => {
      errMessTip.value = err.msg
      done && done()
    })
}

watch(
  () => noChange,
  (val) => {
    if (val) {
      showResult.value = true
      onSubmit({}, null)
    }
  },
  {
    immediate: true,
  }
)
</script>
